<template>
	<view>
		<view class="servedetail" v-if="info">
			<view class="main-box">
				<view class="swiper-box z-padding-lr-32 z-padding-t-32">
					<swiper class="swiperimg" @click="bindchange">
						<swiper-item v-for="(item, index) in tool.split(info.images, ',')">
							<image :src="cdn(item)" class="swiperimg" mode="aspectFill" @click="previewImages" />
						</swiper-item>
					</swiper>
					<view class="tips z-padding-tb-8 z-padding-lr-16 z-radius-32 z-font-24">{{ current + 1 }}/{{ tool.split(info.images, ',').length }}</view>
				</view>
				<view class="activeone z-padding-32">
					<view class="next_one z-radius-24 z-padding-b-32">
						<view class="next_one_top">
							<view class="next_one_top_text z-padding-16 z-font-24">最快{{ info.response_hour }}小时上门</view>
						</view>
						<view class="money z-font-w z-padding-lr-32" style="margin-top: -30rpx">
							<view class="z-font-30 z-margin-t-8">￥</view>
							<view class="z-font-40 z-font-w">{{ info.price }}</view>
						</view>
						<view class="z-padding-lr-32 z-padding-t-24 z-padding-b-16 name">
							<view class="z-font-w z-font-32">{{ info.name }}</view>
							<view class="text_999 z-font-24">已售{{ info.salenums }}</view>
						</view>
						<view class="z-padding-lr-32 text_999" v-if="info">
							<block v-for="(item, index) in tool.split(info.tag_name, '|')">
								<text class="text_999 z-font-22">{{ item }}</text>
								<text class="lines z-margin-lr-8" v-if="index + 1 < tool.split(info.tag_name, '|').length"></text>
							</block>
						</view>
					</view>
					<view class="levelBox z-radius-b-16 z-padding-lr-32 z-flex-c text_999" v-if="info.isPlus < 1" @click="level">
						<image src="../../static/service/level.png" class="level-icon"></image>
						<view class="level-info z-font-22 z-flex-1">开通会员下单，立即享受更多折扣</view>
						<view class="z-font-22 z-margin-r-16">立即开通</view>
						<u-icon name="arrow-right" size="10"></u-icon>
					</view>
					<view class="content-box z-margin-t-24 z-padding-24 z-radius-20">
						<view class="z-flex-c z-margin-b-24">
							<view class="line z-margin-r-16"></view>
							<view class="z-font-30">服务流程</view>
						</view>
						<block v-for="(item, index) in tool.split(info.flow_path_images, ',')">
							<image :src="cdn(item)" class="info-img" mode="widthFix"></image>
						</block>
					</view>
					<view class="comment_box" v-if="commentInfo.totalNum > 0">
						<view class="comment_box_top z-margin-t-32 z-margin-b-24">
							<view class="z-font-w">评价({{ commentInfo.totalNum }})</view>
							<view class="text_999 z-font-24 z-flex" @click="comment">
								好评率{{ commentInfo.goodPercent * 100 }}%
								<u-icon name="arrow-right" size="10"></u-icon>
							</view>
						</view>
						<block v-for="(item, index) in list" v-if="index < 2">
							<comment :info="item"></comment>
						</block>
					</view>
					<view class="content-box z-margin-t-24 z-padding-24 z-radius-20">
						<view class="z-flex-c z-margin-b-24">
							<view class="line z-margin-r-16"></view>
							<view class="z-font-30">详情</view>
						</view>
						<block v-for="(item, index) in tool.split(info.illustrate_images, ',')">
							<image :src="cdn(item)" class="info-img" mode="widthFix" @click="previewIll(index)"></image>
						</block>
					</view>
				</view>
			</view>
			<view class="bottom" :style="{paddingBottom:safeBottom}">
				<view class="bottom_content z-padding-lr-32 z-padding-t-32">
					<view class="bottom_content_left z-margin-r-32" @click="collect">
						<image src="/static/service/collected.png" v-if="info.followState" class="bottom_content_img" mode="" />
						<image src="/static/service/collect.png" v-else class="bottom_content_img" mode="" />
						<view class="z-font-22 text_999" v-if="info.followState">已收藏</view>
						<view class="z-font-22 text_999" v-else>收藏</view>
					</view>
					<view class="vbutton z-radius-24">
						<!-- <van-button type="primary" bind:tap="openshow" size="large">立即预约</van-button> -->
						<u-button @click="openshow" type="primary" text="立即预约" color="#07C160"></u-button>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup mode="bottom" :show="show" @close="close" @open="open">
		    <view class="popcontent z-padding-lr-32 z-padding-t-32 z-radius-tl-20">
		      <view class="popcontent_top">
		        <image :src="cdn(info.image)" class="popcontent_img z-margin-r-32 z-flex-0" mode="aspectFill" />
		        <view class="popcontent_top_text">
		          <view>{{info.name}}</view>
		
		          <view class="z-padding-r-32  text_999" v-if="info">
		            <block v-for="(item,index) in tool.split(info.tag_name,'|')">
		              <text class="text_999 z-font-22">{{item}}</text>
		              <text class="lines z-margin-lr-8" v-if="index+1 < tool.split(info.tag_name,'|').length"></text>
		            </block>
		          </view>
		        </view>
		        <view class="money">￥<view class="z-font-w">{{price}}</view></view>
		      </view>
		      <view class="specification z-margin-tb-32">
		        <view class="spu">
		          <block v-for="(item,i) in info.spu">
		            <view class="text_999 z-font-24">{{item.name}}</view>
		          <view class="project_box z-margin-tb-24">
		            <view class="z-flex-c spu-box">
		              <view class="z-flex z-margin-b-16 z-margin-r-16 spu-item" :class="{'active':item.select==val}" v-for="(val,index) in item.skudetail" @click="selectSpu(val,i)">{{val}}</view>
		            </view>
		          </view>
		          </block>
		        </view>
		        <view class="step">
		          <view class="text_999 z-font-24">数量</view>
		          <view class="z-flex z-margin-l-40">
		            <image src="../../static/service/sub.png" class="icon" @click="sub"></image>
		            <view class="z-margin-lr-24 z-font-32">{{num}}</view>
		            <image src="../../static/service/add.png" class="icon" @click="add"></image>
		          </view>
		        </view>
		      </view>
		      <view style="padding-bottom:30rpx;">
		        <!-- <van-button type="primary" @tap="makeorder" size="large">立即预约</van-button> -->
				<u-button @click="makeorder" type="primary" text="立即预约" color="#07C160"></u-button>
		      </view>
		    </view>
		  </u-popup>
	</view>
</template>

<script>
	import http from '../../utils/http';
	import comment from "@/component/comment.vue"
export default {
	components:{
		comment
	},
	data() {
		return {
			current: 0,
			show: false,
			id: '',
			info: '',
			goods_sku_id: '',
			num: 1,
			skill_id: '',
			shop_id: '',
			safeBottom: `20px`,
			list: [],
			commentInfo: '',
			price: ''
		};
	},
	onLoad(options) {
		this.id = options.id,
		this.skill_id = options.skill_id || '',
		this.shop_id = options.shop_id || ''
		this.getInfo();
	},
	methods: {
		getInfo() {
			http.get('goods/goodsinfo', {
			      id: this.id
			    }, true).then(res => {
			      res.data.spu = res.data.spu.map(value => {
			        value.skudetail = value.skudetail.split(',')
			        value.select = value.skudetail[0]
			        return value
			      })
			     this.info = res.data
			     this.goods_sku_id = res.data.sku[0] ? res.data.sku[0].id : ''
			     this.price = res.data.sku[0] ? res.data.sku[0].price : ''
			})
			
			http.get('comment/getlist', {
			      goods_id: this.id,
			    }).then(res => {
					console.log(res,11111111)
			        this.list = res.data
			})
			
			http.get('comment/totalcomment', {
			      goods_id: this.id,
			      type: 'goods'
			    }).then(res => {
			    this.commentInfo = res.data  
			})
		},
		level(){
		    this.util.authSkip('/service/level/level')
		},
		bindchange(event) {
		    this.current = event.detail.current
		},
		previewIll(index){
		    this.util.previewImage(this.info.illustrate_images, index)
		},
		comment(){
		    this.util.skip('/service/comments/comments?type=goods&id='+this.id)
		},
		collect(){
		    if(!uni.getStorageSync('token')) {
		      this.util.skip('/service/login/login')
		      return
		    }
		    http.get('follow/handlefollow', {
		      follow_id: this.id,
		      type: 1,
		      state: this.info.followState ? 0 : 1
		    }).then(res => {
		      this.info.followState = this.info.followState ? 0 : 1
		      this.info = this.info
		    })
		},
		openshow() {
		    if(this.info.spec_type === 1 && this.info.sku.length > 0){
		      this.show = true
		    }else {
		      if(!wx.getStorageSync('token')) {
		        this.util.skip('/service/login/login')
		        return
		      }
		      if (this.skill_id) {
		        this.util.skip('/service/makeorder/makeorder?goods_sku_id=' + this.goods_sku_id + '&num=' + this.num + '&goods_id=' + this.id + '&skill_id=' + this.skill_id+'&shop_id='+this.shop_id)
		  
		      } else if (this.info.choose_skill_type === 1){
		        this.util.skip('/service/servelist/servelist?goods_sku_id=' + this.goods_sku_id + '&num=' + this.num + '&goods_id=' + this.id+'&shop_id='+this.shop_id)
		      } else {
		        this.util.skip('/service/makeorder/makeorder?goods_sku_id=' + this.goods_sku_id + '&num=' + this.num + '&goods_id=' + this.id+'&shop_id='+this.shop_id)
		      }
		      
		    }
		},
		makeorder() {
		    if(!uni.getStorageSync('token')) {
		      this.util.skip('/service/login/login')
		      return
		    }
		    this.show = false
		    if (this.skill_id) {
		      this.util.skip('/service/makeorder/makeorder?goods_sku_id=' + this.goods_sku_id + '&num=' + this.num + '&goods_id=' + this.id + '&skill_id=' + this.skill_id+'&shop_id='+this.shop_id)
		
		    } else if (this.info.choose_skill_type === 1){
		      this.util.skip('/service/servelist/servelist?goods_sku_id=' + this.goods_sku_id + '&num=' + this.num + '&goods_id=' + this.id+'&shop_id='+this.shop_id)
		    } else {
		      this.util.skip('/service/makeorder/makeorder?goods_sku_id=' + this.goods_sku_id + '&num=' + this.num + '&goods_id=' + this.id+'&shop_id='+this.shop_id)
		    }
		  },
		 selectSpu(item,index){
			 console.log(item,index)
			 console.log(this.info.spu,'!!')
		    this.info.spu[index].select = item
		    // this.info = this.info
		    let arr = this.info.spu.map(value => {
		      return value.select
		    })
		    arr = arr.join(',')
		    for(let i=0; i< this.info.sku.length; i++){
		      if(this.info.sku[i].name == arr){
		        this.goods_sku_id = this.info.sku[i].id,
		        this.price = this.info.sku[i].price
		        break
		      }
		    }
		},
		add() {
		    this.num = ++this.num
		},
		sub() {
		    if (this.num === 1) {
		      return
		    }
		    this.num = --this.num
		},
		previewImages(e) {
			this.util.previewImage(this.info.images, e.index);
		},
		open() {
		    // console.log('open');
		},
		close() {
		     this.show = false
		}
	}
};
</script>

<style>
.servedetail {
	background-color: #edf1f4;
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}
.main-box {
	flex: 1;
	overflow-y: auto;
}
.swiper-box {
	position: relative;
}
.tabs_box::-webkit-scrollbar {
	display: none;
}
.swiperimg {
	width: 686rpx;
	height: 686rpx;
}
.activeone {
	box-sizing: border-box;
}
.tips {
	position: absolute;
	right: 50rpx;
	color: #fff;
	background: rgba(0, 0, 0, 0.5);
	top: 600rpx;
}
.next_one {
	box-sizing: border-box;
	margin: 0 auto;
	background-color: #fff;
	position: relative;
}
.next_one_top {
	display: flex;
	justify-content: flex-end;
}
.next_one_top_text {
	background: rgba(98, 203, 129, 0.1);
	color: #62cb81;
	border-radius: 0 20rpx 0 20rpx;
}
.money {
	display: flex;
	align-items: center;
	color: var(--mainmoneycolor);
}
.name {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.lines {
	display: inline-block;
	width: 1rpx;
	height: 18rpx;
	background-color: #edeef1;
}

.next_two {
	background: linear-gradient(180deg, #f0faf3 0%, #ffffff 100%);
	width: 90vw;
	box-sizing: border-box;
	margin: 0 auto;
}
.next_two_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.fourimg {
	display: flex;
	justify-content: space-between;
}
.fourimg_item {
	width: 64rpx;
	height: 64rpx;
}
.van-steps {
	background-color: rgba(0, 0, 0, 0) !important;
	margin-top: -20rpx;
}
.fourtext {
	display: flex;
	justify-content: space-between;
}
.fourtext_item {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.comment_box {
	width: 90vw;
	margin: 0 auto;
	box-sizing: border-box;
}
.comment_box_top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.comment_item {
	background-color: #fff;
	box-sizing: border-box;
}
.comment_item_top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.comment_item_top_left {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.comment_item_top_left_text {
	display: flex;
	flex-direction: column;
}

.comment_item_img {
	width: 66rpx;
	height: 66rpx;
	border-radius: 50%;
}
.scroll_box {
	width: 600rpx;
	white-space: nowrap;
}
.scroll_box_imgbox {
	display: flex;
}
.scroll_box_img {
	width: 190rpx;
	height: 190rpx;
}
.scroll_box_img:nth-child(n + 2) {
	margin-left: 30rpx;
}
.content-box {
	background: #fff;
}
.line {
	width: 6rpx;
	height: 28rpx;
	background: linear-gradient(#62cb81, #e3fdce);
}
.bottom {
	background-color: #fff;
	width: 100vw;
}
.bottom_content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.bottom_content_img {
	width: 40rpx;
	height: 40rpx;
}
.bottom_content_left {
	align-items: center;
	display: flex;
	flex-direction: column;
}
.vbutton {
	flex: 1;
}
.popcontent {
	position: relative;
	z-index: 23 !important;
}

.popcontent_top {
	display: flex;
	align-items: center;
}
.project_box {
	max-height: 600rpx;
	overflow-y: auto;
}
.project_box::-webkit-scrollbar {
	display: none;
}
.popcontent_img {
	width: 114rpx;
	height: 114rpx;
}
.popcontent_top_text {
	display: flex;
	flex-direction: column;
	height: 114rpx;
	justify-content: space-around;
	flex: 1;
}
.money {
	display: flex;
	color: var(--mainmoneycolor);
}
.specification_box {
	display: flex;
	flex-wrap: wrap;
}

.specification_item {
	padding: 10rpx 40rpx;
	background-color: #f5f7f9;
	border-radius: 15rpx;
}

.one {
	border: 1rpx solid #62cb81;
	background-color: #f0faf3;
	border-radius: 15rpx;
	color: #62cb81;
	padding: 10rpx 40rpx;
}
.project_item {
	height: 120rpx;
	box-sizing: border-box;
	padding: 0 40rpx;
	background-color: #f5f7f9;
	border-radius: 15rpx;
}
.project_one {
	height: 120rpx;
	border: 1rpx solid #62cb81;
	background-color: #f0faf3;
	border-radius: 15rpx;
	color: #62cb81;
	padding: 0 40rpx;
}

.spu {
	max-height: 600rpx;
	overflow-y: auto;
}

.spu-box {
	flex-wrap: wrap;
}

.spu-item {
	height: 64rpx;
	padding: 0 40rpx;
	background: #f5f7f9;
	box-sizing: border-box;
	color: #1c274c;
	border-radius: 10rpx;
	font-size: 22rpx;
}
.active {
	border: 1rpx solid #62cb81;
	background-color: #f0faf3;
	color: #62cb81;
}

.info-img {
	width: 100%;
}
.step {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.icon {
	width: 32rpx;
	height: 32rpx;
}

.levelBox {
	background: #1c274c;
	height: 70rpx;
	margin-top: -30rpx;
	padding-top: 30rpx;
}
.level-icon {
	width: 30rpx;
	height: 30rpx;
}
.level-info {
	color: #f7c566;
}
</style>
